<template>
	<view id="apps">
		<!-- title -->
		<view class="title">
			<text>登入</text>
		</view>
		<view class="tip">
			<text>还没有账号？</text>
			<text class="link" @click="routerGo('/pages/registered/index')">立即注册</text>
		</view>
		<!-- form -->
		<view class="form">
			<view class="form_item">
				<input type="text" v-model="mobile" placeholder="请输入手机号" placeholder-class="placeholder">
			</view>
			<view class="form_item code" v-if="!isPassword">
				<text v-if="!isSend" @click="getVerCode">获取验证码</text>
                <text v-else>重新发送{{ timeNum }}S</text>
				<input v-model="captcha" placeholder="请输入短消息验证码" type="text" placeholder-class="placeholder">
			</view>
			<view class="form_item" v-else>
				<input type="text" v-model="password" placeholder="请输入密码" password="true" placeholder-class="placeholder">
			</view>
		</view>
		<!-- btns -->
		<view class="btns">
			<button type="button" @click="sign">登入</button>
		</view>
		<view class="regit">
			<text v-if="!isPassword" @click="isPassword = true">密码登入</text>
            <text v-else @click="isPassword = false">验证码登入</text>
			<text v-if="isPassword" @click="routerGo('/pages/registered/forget')">忘记密码？</text>
		</view>

		<!-- 版权 -->
		<view class="copyright" v-if="detail.agreement_name || detail.declare_name">
			<text>登入及表示同意</text>
			<text class="link" v-if="detail.agreement_name" @click="toRule('agreement')">《{{detail.agreement_name}}》</text>
			<text v-if="detail.declare_name">和</text>
			<text @click="toRule('declare')" v-if="detail.declare_name" class="link">《{{detail.declare_name}}》</text>
		</view>

		<!-- bg -->
		<view class="bg">
			<image src="/static/images/login_bg.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name: "sign",
		data() {
			return {
				pic_captcha: '',
				mobile: '',
				captcha: '',
				validate_code_id: '',
				type: '',
				password: '',
				imageUrl: '',
				isSend: false,
				timeNum: 60,
				timeIng: 0,
				isPassword: false,
				detail: {
					agreement_name: '',
					declare_name: '',
				}
			}
		},
		onLoad() {
			this.$commonLoad.onload();
			// this.getImageUrl();
			this.getDetail();
			// #ifdef H5
			this.$storage.setStorageSync('platform', 'mobile');
			// #endif
		},
		computed: {
			agree: function() {
				if ((this.mobile && this.pic_captcha) || (this.mobile && this.password)) {
					return true;
				} else {
					return false;
				}
			}
		},
		methods: {
			getVerCode: function() {
				this.timeNum = 60;
				this.$request({
					url: this.$api.registered.sms,
					method: "post",
					data: {
						mobile: this.mobile,
						pic_captcha: this.pic_captcha
					}
				}).then(response => {
					if (response.code === 0) {
						this.isSend = true;
						this.validate_code_id = response.data.validate_code_id;
						this.change();
					} else {
						// this.getImageUrl();
						uni.showToast({
							icon: 'none',
							title: response.msg
						})
					}
				});
			},
			toRule(string) {
				this.$store.dispatch('user/sign', {
					mobile: this.mobile,
					validate_code_id: this.validate_code_id,
					sms_captcha: this.sms_captcha,
				});
				let title = string == 'agreement' ? this.detail.agreement_name : this.detail.declare_name;
				uni.navigateTo({
					url: `/pages/rules/index?url=${encodeURIComponent(this.$api.registered.register_data)}&key=` +
						string + `&title=` + title,
				});
			},
			getImageUrl: function() {
				this.$request({
					url: this.$api.registered.captcha,
					data: {
						refresh: true
					}
				}).then(response => {
					this.imageUrl = response.url;
				});
			},
			getDetail: function() {
				this.$request({
					url: this.$api.registered.register_data,
				}).then(response => {
					if (response.code === 0) {
						this.detail = response.data;
					} else {
						uni.showToast({
							icon: 'none',
							title: response.msg
						});
					}
				});
			},
			change: function() {
				clearInterval(this.timeIng);
				this.timeIng = setInterval(() => {
					this.timeNum--;
					if (this.timeNum === 0) {
						clearInterval(this.timeIng);
						this.isSend = false;
					}
				}, 1000);
			},
			sign: function() {
				console.log('sign');
				// if (!this.agree) return;
				let data = {
					type: this.type,
					mobile: this.mobile,
					validate_code_id: this.validate_code_id,
					captcha: this.captcha,
					password: this.password
				}
				if (this.isPassword) {
					delete data.validate_code_id;
					delete data.captcha;
					data.type = 'username';
				} else {
					data.type = 'mobile';
					delete data.password;
				}
        uni.showLoading({
          mask: true,
          title: '登录中...'
        });
				this.$request({
					url: this.$api.registered.login,
					method: "post",
					data: data
				}).then(response => {
          uni.hideLoading();
					if (response.code === 0) {
						this.$storage.setStorageSync('_USER_ACCESS_TOKEN', response.data.access_token);
            // this.$storage.setStorageSync('_USER_SIGN', true);
						uni.redirectTo({
							url: '/pages/user-center/user-center'
						});
					} else {
						// this.getImageUrl();
						uni.showToast({
							icon: 'none',
							title: response.msg
						});
					}
				});
			},
			router(url) {
				uni.redirectTo({
					url
				});
			},
			routerGo(url) {
				uni.navigateTo({
					url
				});
				// uni.
			}
		},
		beforeDestroy() {
			clearInterval(this.timeIng);
		}
	}
</script>

<style lang="scss" scoped>
page {
  background-color: white;
}
	#apps {

		// display: flex;
		// flex-flow: column wrap;

		// title
		.title {
			display: block;
			text-align: left;
			padding: 74rpx 74rpx 32rpx 74rpx;

			text {
				font-size: 56rpx;
				color: #333;
				font-weight: bold;
				box-sizing: border-box;
				position: relative;
        z-index: 1;

				&::before {
					content: '';
					height: 18rpx;
					width: 100%;
					display: inline-block;
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					margin: auto;
					background: $index_color;
					z-index: -1;
				}
			}

		}

		// tip
		.tip {
			padding: 0 74rpx 0 74rpx;

			text {
				font-size: 28rpx;
				color: #999;

				&.link {
					color: $index_color;
				}
			}
		}

		// form
		.form {
			padding: 50rpx 74rpx 74rpx;
			box-sizing: border-box;

			// form_item
			.form_item {
				height: 112rpx;
				line-height: 112rpx;
				border-bottom: 1px rgba(153, 153, 153, .2) solid;
				display: flex;
				align-items: center;
				position: relative;

				input {
					line-height: 112rpx;
					height: 112rpx;
					flex: 1;
					font-size: 36rpx;
					color: #333;

					.placeholder {
						font-size: 28rpx;
						color: #999;
					}
				}

				text {
					font-size: 36rpx;
					color: #333;
					font-weight: bold;
				}

				&.code {
					text {
						position: absolute;
						top: 0;
						right: 0;
						bottom: 0;
						margin: auto;
						font-size: 28rpx;
						color: #DE4335;
						z-index: 100;
					}

					input {
						margin-left: 0;
					}
				}
			}
		}

		// btns
		.btns {
			margin-top: 30rpx;
			padding: 0 74rpx;
			box-sizing: border-box;

			button {
				background: #DE4335;
				box-shadow: 0px 6rpx 12rpx rgba(222, 67, 53, 0.5);
				opacity: 1;
				border-radius: 44rpx;
				margin-bottom: 40rpx;
				color: #fff;
				font-weight: 36rpx;

				&.gray {
					background: #f6f6f6 !important;
					box-shadow: 0px 6rpx 12rpx rgba(246, 246, 246, 0.5);
					color: #333;
				}

				&::after {
					border: 0;
				}

				&:hover {
					opacity: .9;
				}

			}

		}

		// regit
		.regit {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 74rpx;
			box-sizing: border-box;

			text {
				font-size: 28rpx;
				color: #666;

				&:last-of-type {
					color: #999;
				}
			}
		}

		// copyright
		.copyright {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 50rpx;
			display: block;
			text-align: center;
			font-size: 22rpx;
			color: #999;

			.link {
				color: #EA445C;
			}
		}

		// bg
		.bg {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;

			image {
				width: 570rpx;
				height: auto;
			}
		}
	}
</style>
